<template>
    <div id="modifyDiv">
        <el-container>
        <el-header><span><el-button type="primary" @click="prev()">返回</el-button></span></el-header>
        <el-main>
            <div>
                <p style=" text-align: left;">商品列表</p>
                <el-table
                :data="tableItemData"
                border
                style="width: 100%">
                <el-table-column
                prop="image"
                label="商品图片">
                <template slot-scope="scope">
                <el-image :src="scope.row.image">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
                </el-image>
                </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="商品名称">
                </el-table-column>
                <el-table-column
                label="价格/货号">
                 <template slot-scope="scope">
                    价格：{{scope.row.price}}
                    货号：{{scope.row.sn}}
                </template>
                </el-table-column>
                <el-table-column
                prop="spec"
                label="属性">
                </el-table-column>
                <el-table-column
                label="数量">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.num" id="NumInput" @blur.prevent="changeCount(scope.$index)" placeholder="请输入内容"></el-input>
                </template>
                </el-table-column>
                <el-table-column
                prop="snum"
                label="库存">
                </el-table-column>
                <el-table-column
                prop="money"
                label="小计">
                </el-table-column>
            </el-table>
            <p style=" text-align: right;">合计:{{money}}</p>
            </div>
            <div>
            <el-container style="background-color: #CCE4EB;">
            <el-header><p style=" text-align: left;">添加商品</p></el-header>
            <el-main style="width:80%;margin:0 auto;">
            <el-form label-width="80px" :model="Modifyform">
                <table
                border
                style="width: 100%">
                <tr>
                    <th width='20%'>搜索商品</th>
                    <td>
                    <el-form :inline="true" style="padding:0;">
                    <el-form-item :model="Goodsform">
                        <el-input v-model="Goodsform.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="findGoods()">查询</el-button>
                    </el-form-item>
                    </el-form>
                    </td>
                </tr>
                 <tr>
                    <th>商品名称</th>
                    <td>{{Modifyform.name}}</td>
                </tr>
                 <tr>
                    <th>货号</th>
                    <td>{{Modifyform.sn}}</td>
                </tr>
                 <tr>
                    <th>分类</th>
                    <td>{{Modifyform.category2_name}}->{{Modifyform.category3_name}}</td>
                </tr>
                 <tr>
                    <th>品牌</th>
                    <td>{{Modifyform.brand_name}}</td>
                </tr>
                 <tr>
                    <th>价格</th>
                    <td>￥{{Modifyform.price}}</td>
                </tr>
                 <tr>
                    <th>属性</th>
                    <td>
                    <el-form-item>
                        <div>
                        <el-select v-model="selectMap[item.spec]" :placeholder="item.spec" :key="item.$index" v-for="item in specs" style="padding-right:20px;">
                            <el-option
                            v-for="items in item.options"
                            :key="items.$index"
                            :label="items"
                            :value="items">
                            </el-option>
                        </el-select>
                        </div>
                    </el-form-item>
                    </td>
                </tr>
                 <tr>
                    <th>库存</th>
                    <td>{{Modifyform.num}}</td>
                </tr>
                 <tr>
                    <th>数量</th>
                    <td>
                    <el-form-item>
                        <el-input style="width:150px;" v-model="Modifyform.onum"></el-input>
                    </el-form-item>
                    </td>
                </tr>
                 <tr>
                    <th>操作</th>
                    <td>
                    <el-form-item>
                    <el-button type="primary" @click="insertItem()">加入订单</el-button>
                    </el-form-item>
                    </td>
                </tr>
                </table>
                <el-form-item style="margin-top:20px">
                    <el-button type="primary" @click="submitItem()">确定</el-button>
                    <el-button type="primary" @click="prev()">取消</el-button>
                </el-form-item>
            </el-form></el-main>
            </el-container>
            </div>
        </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
  data () {
    return {
      money: 0,
      tableItemData: [],
      orderMap: {},
      dialogFormVisible: false,
      // 对话框表单提交的数据
      Modifyform: { //  table: [{ name: '' }]
      },
      // 对话框大小
      formLabelWidth: '120px',
      Goodsform: {},
      categoryform: [],
      specMap: [], //
      selectMap: {},
      num: 0,
      specs: [],
      one: 0
    }
  },
  methods: {
     // 获取品牌信息列表
    async getfindAll () {
      // 发送请求查询数据并返回
      this.orderMap.orderId = this.$route.query.orderId
      const { data: details } = await this.$http.get(`/orders/order/findDetails/${this.$route.query.orderId}`) // 查询出商品的货号，库存等详细信息
      const { data: item } = await this.$http.post('/orders/order/item/findItem', this.orderMap) // 查询商品表
      const { data: category } = await this.$http.get('/goods/category/findAll') // 查询出所有分类信息
      this.categoryform = category.data
      this.tableItemData = item.data
      // this.Modifyform = details.data[0]
      for (let i = 0; i < this.tableItemData.length; i++) {
        this.money += this.tableItemData[i].money
        this.tableItemData[i].sn = details.data[i].sn
        this.tableItemData[i].snum = details.data[i].num
        this.tableItemData[i].spec = details.data[i].spec
      }
    },
    async findGoods () {
        this.specs = []
        const { data: goods } = await this.$http.post('/orders/order/findGoods', this.Goodsform)
        this.Modifyform = goods.data[0]
        for (let i = 0; i < this.categoryform.length; i++) {
          if (this.categoryform[i].id === this.Modifyform.category1_id) {
            this.Modifyform.category1_name = this.categoryform[i].name
          }
          if (this.categoryform[i].id === this.Modifyform.category2_id) {
            this.Modifyform.category2_name = this.categoryform[i].name
          }
          if (this.categoryform[i].id === this.Modifyform.category3_id) {
            this.Modifyform.category3_name = this.categoryform[i].name
          }
        }
        const { data: spec } = await this.$http.get(`/goods/spu/selectSpuSku/${this.Modifyform.name}`)
        this.specMap = spec.data
        const specsss = JSON.parse(this.specMap[0].spec_items)
        console.log(this.specMap)
        for (let i = 0; i < Object.keys(specsss).length; i++) {
         this.specs.push({ spec: Object.keys(specsss)[i], options: Object.values(specsss)[i] })
        }
        console.log(this.specs)
    },
    async insertItem () {
        const { data: sku } = await this.$http.get(`/goods/sku/findSkuList/${this.specMap[0].spuId}`)
        for (let i = 0; i < sku.length; i++) {
            const spec = JSON.parse(sku[i].spec)
            const spec1 = Object.keys(spec)
            // const spec2 = Object.keys(this.specs)
            console.log(this.selectMap)
             this.one = 0
            for (let j = 0; j < spec1.length; j++) {
                 for (let c = 0; c < spec1.length; c++) {
                 if (Object.values(spec)[c] === Object.values(this.selectMap)[j] && Object.keys(spec)[c] === Object.keys(this.selectMap)[j]) {
                    this.one = this.one + 1
                    if (this.one === spec1.length) {
                        this.Modifyform.skuId = sku[i].id
                    }
                 }
            }
            }
        }
        this.Modifyform.spec = JSON.stringify(this.selectMap)
        this.Modifyform.snum = this.Modifyform.num
        this.Modifyform.num = this.Modifyform.onum
        this.Modifyform.money = this.Modifyform.num * this.Modifyform.price
        this.Modifyform.spuId = this.specMap[0].spuId
        this.Modifyform.orderId = this.tableItemData[0].orderId
        this.Modifyform.payMoney = this.Modifyform.num * this.Modifyform.price
        this.Modifyform.categoryId1 = this.Modifyform.category1_id
        this.Modifyform.categoryId2 = this.Modifyform.category2_id
        this.Modifyform.categoryId3 = this.Modifyform.category3_id
        this.Modifyform.postFee = 0
        this.Modifyform.isReturn = 0
        this.money = 0
        for (let i = 0; i < this.tableItemData.length; i++) {
          this.money += this.tableItemData[i].money
        }
        console.log(this.Modifyform.skuId)
        if (this.Modifyform.skuId !== undefined) {
            this.tableItemData.push(this.Modifyform)
            this.Modifyform = {}
            this.selectMap = {}
            this.Goodsform = {}
        } else {
            this.$message({
                type: 'success',
                message: '暂时没有该配置'
            })
        }
    },
    // 关闭订单
    prev () {
      this.$router.go(-1)
    },
    // 确定
    async submitItem () {
        console.log(this.tableItemData)
        const { data: orderItem } = await this.$http.post('/orders/order/item/InsertOrderItem', this.tableItemData)
        if (orderItem.code === 200) {
            this.$message({
                type: 'success',
                message: '成功！'
            })
             this.$router.go(-1)
        }
    },
    // 失去焦点
   changeCount (index) {
       this.money = 0
       this.tableItemData[index].money = this.tableItemData[index].num * this.tableItemData[index].price
        for (let i = 0; i < this.tableItemData.length; i++) {
        this.money += this.tableItemData[i].money
      }
       console.log(this.tableItemData)
   }
  },
  // 钩子函数
  async created () {
      this.getfindAll()
  }
}
</script>

<style type="text/css">
table {
    border-collapse: collapse;
    margin: 0 auto;
}
table td, table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 50px;
}
table th {
    background-color: #CCE8EB;
    width: 100px;
}
table td {
     padding-top: 8px;
    padding-bottom: 8px;
    padding-left:30px;
    padding-right:20px;
    text-align: left;
}
table tr:nth-child(odd) {
    background: #fff;
}
table tr:nth-child(even) {
    background: #F5FAFA;
}
.el-form-item {
    margin-bottom: 0px;
    .el-form-item__content {
        margin-left: 0px;
    }
}

</style>
